<template>
  <div>
    <!--操作按钮-->
    <div class="operation_container">
      <ul>
        <li><el-button v-waves type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="openFormDialog">新增</el-button></li>
      </ul>
    </div>
    <!--栅格-->
    <el-table
      ref="singleTable"
      :data="data.arList"
      border
      stripe
      fit
      highlight-current-row
    >

      <el-table-column prop="id" label="结算编号" align="center" show-overflow-tooltip width="200" />
      <el-table-column label="状态" align="center" show-overflow-tooltip width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.status | arStatusFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="slipNo" label="憑證號" align="center" show-overflow-tooltip width="150" />
      <el-table-column prop="invoiceNo" label="发票号" align="center" show-overflow-tooltip width="200" />
     <!-- <el-table-column prop="basicNo" label="运单号" align="center" show-overflow-tooltip width="100" />
     --> <el-table-column prop="amount" label="结算金额" align="center" show-overflow-tooltip width="150" />
      <el-table-column prop="frtNm" label="费用名称" align="center" show-overflow-tooltip width="100" />
      <el-table-column prop="payCust" label="客户编号" align="center" show-overflow-tooltip width="200" />
      <el-table-column prop="slipDt" label="下账日期" align="center" show-overflow-tooltip width="200" />
      <el-table-column prop="receivedAccount" label="已付款" align="center" show-overflow-tooltip width="150" />
      <el-table-column prop="cargoObjectName" label="产品名称" align="center" show-overflow-tooltip width="150" />
      <el-table-column prop="remainedAmount" label="剩余金额" align="center" show-overflow-tooltip width="150" />
      <el-table-column prop="contractNo" label="合同号" align="center" show-overflow-tooltip width="150" />
      <el-table-column prop="purchaseOrderId" label="客户订单号" align="center" show-overflow-tooltip width="150" />
      <el-table-column label="操作" align="center" fixed="left" width="150">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="openFormDialog(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
     </el-table>
    <!-- 对话框 -->
    <div class="dialog_container">
      <el-dialog
        :title="formDialog.title"
        :close-on-click-modal="false"
        :before-close="closeFormDialog"
        :visible.sync="formDialog.visible"
        width="35%"
      >
        <el-form ref="formDialog" :model="formDialogData" :rules="formDialogRules" label-position="right" label-width="120px" class="dialog_form">
          <el-form-item label="运单号：">
            <el-input v-model="data.freightOrderNo" disabled />
          </el-form-item>
          <el-form-item label="托运人：">
            <el-input v-model="data.customerName" disabled />
          </el-form-item>
          <el-form-item label="运单明细号：">
            <el-select v-model="formDialogData.freightOrderItemId">
              <el-option v-for="item in data.itemList" :key="item.id" :label="item.id" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="费用类型：">
            <el-select v-model="formDialogData.feeSubject" filterable clearable>
              <el-option v-for="item in selects.feeSubjectList" :key="item.key" :label="item.label" :value="item.key" />
            </el-select>
          </el-form-item>
          <el-form-item label="实际出发时间：">
            <el-date-picker
              v-model="formDialogData.estTransferDate"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="单价：">
            <el-input v-model="formDialogData.price" />
          </el-form-item>
          <el-form-item label="总价：">
            <el-input v-model="formDialogData.amount" />
          </el-form-item>
          <el-form-item label="备注：">
            <el-input v-model="formDialogData.remark" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeFormDialog()">取消</el-button>
          <el-button type="primary" @click="confirmFormDialog()">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import appConstant from '@/constant/AppConstant'
import AccountingArApi from '@/api/accounting/AccountingArApi'

export default {
  directives: {
    waves
  },
  filters: {
    arStatusFilter(item) {
      const values = appConstant.arapStatusList.filter(value => value.key === item)
      if (values && values.length > 0) {
        return values[0].label
      } else {
        return ''
      }
    }
  },
  props: {
    data: {
      type: Object,
      default: function() {
        return {
          arList: []
        }
      }
    }
  },
  data() {
    return {
      selects: {
        freightOrderStatusList: appConstant.freightOrderStatusList,
        feeSubjectList: appConstant.feeSubjectList
      },
      formDialog: {
        title: '应收',
        visible: false
      },
      formDialogData: {},
      formDialogRules: {
        isSystemic: [{ required: true, message: '_', trigger: 'change' }]
      }
    }
  },
  mounted() {
    this.loadData()
    this.loadSelects()
  },
  methods: {
    loadData() {
      if (this.data.id) {
        // 加载grid数据
        const params = {
          orderSeqNo: this.data.id
        }
        AccountingArApi.list(params).then(response => {
          this.data.arList = response.data
        })
      }
    },
    loadSelects() {},
    openFormDialog(obj) {
      // 1. 判断是否加载数据
      if (obj) {
        this.formDialogData = { ...obj }
      }
      // 2. 下次 DOM 更新循环结束之后, 清除表单校验
      this.$nextTick(() => {
        this.$refs['formDialog'].clearValidate()
      })
      this.formDialog.visible = true
    },
    closeFormDialog() {
      this.formDialog = {
        title: '应收',
        visible: false
      }
      this.formDialogData = {}
    },
    confirmFormDialog() {
      AccountingArApi.add(this.formDialogData).then(response => {
        this.$message.success('添加成功！')
        this.loadData()
        this.closeFormDialog()
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  // 操作按钮
  .operation_container {
    ul {
      padding-right: 2px;
      margin-top: 0;
      li {
        float: left;
        list-style: none;
        padding-right: 2px;
        button {
          margin-bottom: 4px;
        }
      }
    }
  }
</style>
